<template>
  <div>
         <van-search
         class="search"
      v-model="value"
      label="地图"
      show-action
      background="none"
      placeholder="请输入小区地址"
    >
      <template #label>
        <span @click="$router.push('/city')" > {{ $store.state.city.cityName}}</span>
         <van-icon name="arrow-down"  />
      </template>
      <template #action>
       <span @click="$router.push('/map')"><van-icon name="location-o" /></span>
      </template>
    </van-search>

    
    <div class="pic">
      <van-swipe :autoplay="3000" :width="375" :height="200">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" :width="375" :height="200" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="banner">
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <van-image :width="60" :height="60"
            src=""
          /> <p>整租</p>
        </van-grid-item>
        <van-grid-item  >
          <van-image :width="60" :height="60"
            src=""
          /><p>合租</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :width="60" :height="60"
            src=""
          /><p>地图找房</p>
        </van-grid-item>
        <van-grid-item>
          <van-image :width="60" :height="60"
            src=""
          /><p>整租</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="groups">
      <div class="zfxj">
        <h4>租房小组</h4>
        <p href="">更多</p>
      </div>
      <div class="list">
         <HouseGroups v-for="item in list" :key="item.id" :item="item"></HouseGroups>
      </div>
     
    </div>
   
  </div>
</template>

<script>

import HouseGroups from '@/components/house-groups.vue'
import { getPic,getGroups } from '@/api/house'
export default {
  name: 'Home',
  components:{
    HouseGroups,
   
  },
  async created() {
    const res = await getPic()
    const picArr = []
    res.body.forEach((item) => {
      picArr.push((item.imgSrc = this.avatar + item.imgSrc))
    })
    this.images = [...this.images, ...picArr]
    const data = await getGroups()
  
    this.list=[...this.list,...data.body]
   
  },
  data() {
    return {
      images: [],
      avatar: 'http://liufusong.top:8080',
      list:[],
      value:'',
    }
  },
 
}
</script>

<style scoped lang="less">

.search{
  display: flex;
  flex: 1;
   position: absolute;
   top:10px;
   left: 45px;
   z-index: 2;
    background:none;
}
.pic {
  height: 200px;
}
.groups{
  height: 200px;
   background-color: #f6f5f6;
    overflow: hidden;
    padding: 0 10px;
    .zfxj{
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p{
        font-size: 14px;
        color: #787d82;
      }
    }
    .list{
      display: flex;
     justify-content: space-around;
      flex-wrap: wrap;
    }
}
</style>
